<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div style="margin: 0 auto; width: 600px;" id="app"></div>
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        let login = new Login("#app");
    });
    class Login {
        constructor(eleStr) {
            this.appDiv = $(eleStr);
            this.outputLoginBox();
        }

        outputLoginBox() {
            this.loginBoxEle = `
                <form id="loginForm" method="post" onsubmit="return false;">
                    <h1>Login</h1>
                    <hr/>
                    <div class="form-group">
                        <label for="username">Phone Number:</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Enter Phone Number:"/>
                    </div>
                    <div class="form-group">
                        <label for="password">Password:</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password:"/>
                    </div>
                    <div class="form-group">
                    <button id="adminLogin" class="btn btn-sm btn-success">Login</button>
                    </div>
                </form>`;
            this.appDiv.html(this.loginBoxEle);
            $("#adminLogin").click(() => {this.doLogin()});
        }

        doLogin() {
            $.post("/manage/user/login", $("#loginForm").serialize(), function (result) {
                if (result.success) {
                    window.location.href = "/admin/index";
                }
                else {
                    alert(result.msg);
                }
            });
        }
    }
</script>
</html>